/**
 * 创建于：2016-5-11
 * 创建人：杨骐彰
 * 说明： 主页面侧边菜单栏样式
 */
@import '../../../../styles/variables';


//固定定位
$scree-font-size: 1rem;// 默认16px
$scree-font-size-second: 0.875rem;// 默认14px
$scree-font-size-third : 0.75rem;// 默认12px
$bg-color: #f1f4f5;
$block-color:#f6f9f9;
$sidebar-width: 220px;
$sidebar-width-second: 12em;
$click-bg-color:linear-gradient(45deg, rgba(252,223,88,.5) 0%, rgba(250,99,150,.5) 100%);


.sem-sidebar {
  position: fixed;
  font-size: $scree-font-size;
  width: $sidebar-width;
  padding: 1.6rem 0;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  background-color: $bg-color;
  overflow-y: visible;
  transition: all .5s;

  @media screen and (max-width: 1300px){
    font-size: $scree-font-size-second;
    flex: 0 0 $sidebar-width-second;
  }

  .sem-menu-blocks {
    z-index: 2;
    position: relative;
    .sem-blocks-wrapper {
      min-height: 3.375em;
      background-color: $block-color;
      margin-bottom: 2px;
      &:first-child {
        padding-bottom: 1rem;
      }
      &:hover {
        background-color: #f1f4f5
      }

      .sem-title-block{
        height: 5rem;
        width: 100%;
        display: flex;
        justify-content: flex-start;
        flex-direction: row;
        .title-img{
          height: 3.3rem;
          width: 3.3rem;
          margin: auto .5rem auto 1rem;
        }
        .title-text-container{
          width: auto;
          display: flex;
          justify-content: center;
          flex-direction: column;
          max-width: 65%;
          .name{
            font-size:1.2rem;
            color:#333333;
          }
          .name-info{
            font-size:1rem;
            color:#333333;
          }
        }
      }
      .nav{
        background-color: $bg-color;
        line-height: 3.375em;
        text-align: center;
        font-weight: 600;
        font-size: 1.125rem;
      }
      .sem-menu-block {
        position: relative;

        &.clicked {
          color: #ff4978;
          background: $click-bg-color;
        }
        &.isMenu{
          background-color: $block-color;
        }

        //块标题
        .menu-title {
          &.active {
            color: #ff4978;
            :hover{
              background-color: transparent;
            }
          }
          position: relative;
          width: 100%;
          color: #333333;
          display: flex;
          flex-direction: row;
          align-items: center;
          height: 3.375em;
          box-sizing: border-box;
          -webkit-box-sizing: border-box;
          -moz-box-sizing: border-box;
          @media screen and (max-width: 1300px){
            width:  $sidebar-width-second;
          }
          .menu-word {
            display: inline-block;
            width: 100%;
            line-height: 3.375em;
            text-align: center;
          }
        }
        .menu-arrow{
          position: absolute;
          box-sizing: border-box;
          -webkit-box-sizing: border-box;
          -moz-box-sizing: border-box;
          right: 0;
          top: 0;
          z-index: 2;
          padding: 1.25em;

          .right{
            width: $margin-padding-10;
            height: $margin-padding-10;
            background-size: $margin-padding-10 $margin-padding-10;
            background-repeat: no-repeat;
            background-image: url('./icon_raw_right.png');
          }
          .down{
            width: $margin-padding-10;
            height: $margin-padding-10;
            background-size: $margin-padding-10 $margin-padding-10;
            background-repeat: no-repeat;
            background-image: url('./icon_raw_down.png');
          }
        }
      }
      .menu-block {
        position: relative;
        font-size: $scree-font-size-second;
        width: 100%;
        visibility: visible;
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        display: block;
        overflow: hidden;
        transition: all .5s;
        background-color: #f1f4f5;

        @media screen and (max-width: 1300px){
          font-size: $scree-font-size-third;
        }

        &.hide{
          visibility: hidden;
          height: 0;
          overflow: hidden;
          transition:  all .5s;
        }

        .menu-list {
          margin: 0;
          padding: 0;
          z-index: -1;
          width: 100%;
          li {
            width: 100%;
            a {
              position: relative;
              display: block;
              color: #333333;
              line-height: 3.375em;
              width: 100%;
              background-color: #f1f4f5;
              box-sizing: border-box;
              -webkit-box-sizing: border-box;
              -moz-box-sizing: border-box;
              text-decoration: none;
              text-align: center;
              &:hover{
                background: #f1f4f5;
              }
              &.active {
                color: #ff4978;
                background: $click-bg-color;
                :hover{
                  background-color: transparent;
                }
              }
            }
          }
        }
      }
    }
  }
}
